Как добавить ИИ-чат-бот Asyntai в Backdrop CMS

Пошаговое руководство для сайтов на Backdrop CMS

Платформа:

Шаг 1: Получите код встраивания

Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте в шаблон темы (рекомендуется)

Backdrop CMS использует файлы шаблонов .tpl.php в своих темах. Рекомендуемый подход — добавить код вставки непосредственно в шаблон страницы активной темы:

Откройте установку Backdrop CMS через FTP или Файловый менеджер
Перейдите в каталог активной темы: themes/yourtheme/
Откройте файл page.tpl.php (или layout.tpl.php в зависимости от вашей темы)
Найдите закрывающий тег </body> или строку <?php print $page_bottom; ?>
Вставьте код встраивания Asyntai непосредственно перед этой строкой
Сохраните файл

<!-- Asyntai AI Chatbot -->
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
<?php print $page_bottom; ?>
</body>

Совет: Размещение кода непосредственно перед <?php print $page_bottom; ?> или закрывающим тегом </body> гарантирует, что чат-бот загружается после содержимого страницы, обеспечивая лучшую производительность загрузки. Этот метод автоматически добавляет чат-бот на каждую страницу, использующую эту тему.

Альтернативный способ 1: Через пользовательский модуль

Вы можете создать простой модуль Backdrop CMS, который вставляет скрипт чат-бота с помощью backdrop_add_js():

Создайте директорию модуля: modules/custom/asyntai_widget/
Создайте файл модуля asyntai_widget.module со следующим кодом:
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
Создайте файл asyntai_widget.info:
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
Перейдите в раздел Функциональность (admin/modules) в панели администратора Backdrop
Найдите «Asyntai AI Chatbot Widget» в пакете Custom и включите его
Нажмите «Save configuration»

Примечание: Замените YOUR_WIDGET_ID в коде модуля на ваш реальный идентификатор виджета из Панели управления Asyntai. Подход с пользовательским модулем безопасен при обновлениях и не будет перезаписан при обновлении вашей темы.

Альтернативный метод 2: Использование модуля Backdrop «Add to Head»

Модуль «Add to Head» предоставляет простой способ внедрить скрипты без редактирования кода:

Загрузите и установите сторонний модуль «Add to Head» с сайта Backdrop CMS
Перейдите в Configuration > Development > Add to Head
Добавьте код вставки Asyntai в раздел футера
Нажмите «Save configuration»

Совет: Использование модуля «Add to Head» — самый простой метод, если вы предпочитаете не редактировать файлы темы или не создавать собственные модули. Он предоставляет простой административный интерфейс для управления внедрёнными скриптами.

Альтернативный способ 3: Через систему блоков

Для добавления чат-бота также можно использовать систему макетов и блоков Backdrop CMS:

Войдите в панель администратора Backdrop CMS
Перейдите в Structure > Layouts
Выберите макет, который хотите отредактировать (например, макет по умолчанию)
Нажмите «Add block» в footer region
Выберите «Пользовательский блок»
Установите формат блока «Полный HTML» или «Чистый HTML»
Вставьте код встраивания Asyntai в тело блока
Дайте блоку название (например, «Asyntai Chatbot») и при желании отметьте «Скрыть заголовок»
Нажмите «Save block» и затем «Save layout»

Важно: Убедитесь, что формат текста установлен на «Full HTML» или «Raw HTML», чтобы тег скрипта не был удалён. Формат «Filtered HTML» по умолчанию удаляет теги скриптов из соображений безопасности.

Шаг 3: Очистка кэша и проверка

После внесения изменений очистите кэш Backdrop CMS и проверьте установку:

Перейдите в Configuration > Performance в панели администратора
Нажмите «Clear all caches»
Откройте свой сайт в новой вкладке браузера или в режиме инкогнито
Кнопка виджета чата должна появиться в правом нижнем углу
Нажмите на нее, чтобы убедиться, что она открывается и работает корректно

Виджет не отображается? Убедитесь, что вы очистили кэш Backdrop CMS в разделе Конфигурация > Производительность. Попробуйте открыть сайт в режиме инкогнито или очистить кэш браузера. Откройте консоль браузера (F12) для проверки ошибок JavaScript. Если используется метод пользовательского модуля, убедитесь, что он включён в разделе Функциональность.